<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>

    <script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js" charset="utf-8"></script>
    <style>
        #message{
            margin-top:40px;
            border:1px solid gray;
            padding:20px;
        }
    </style>

</head>

<body>

昵称：<input type="text" id="nickname"/>
<button onclick="connect()">连接WebSocket</button>
<button onclick="closeWebSocket()">断开连接</button>
<hr />


<br />
消息：<input id="text" type="text" />
频道号：<input id="toUser" type="text" />
<button onclick="send()">发送消息</button>
<div id="message"></div>
</body>

<script type="text/javascript">
//    var websocket = null;
var stompClient = null;
////加载完浏览器后  调用connect（），打开双通道
//    $(function(){
//    //打开双通道
//     connect()
//    });
////强制关闭浏览器  调用websocket.close（）,进行正常关闭
//        window.onunload = function() {
//            disconnect()
//        };

function connect(){
    var userId=1;
    var socket = new SockJS('http://127.0.0.1:8080/websocket'); //连接SockJS的endpoint名称为"endpointOyzc"
    stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
    stompClient.connect({},function(frame){//连接WebSocket服务端
        console.log('Connected:' + frame);
        //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
        stompClient.subscribe('/user/' + userId + '/queue/getResponse',function(response){
            var code=JSON.parse(response.body);
            showResponse(code)
        });
    });
}
//关闭双通道
    function disconnect(){
        if(stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }
    function showResponse(message){
        var response = $("#response");
        response.append("<p>只有userID为"+message.userId+"的人才能收到</p>");
    }


//    function conectWebSocket(){
//
//    }

//        var nickname = document.getElementById("nickname").value;
//        if(nickname===""){
//            alert("请输入昵称");
//            return;
//        }
//        <!--判断当前浏览器是否支持WebSocket-->
//        <!--if ('WebSocket'in window) {-->
//            <!--websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname);-->
//        <!--} else {-->
//            <!--alert('Not support websocket')-->
//        <!--}-->
//        //连接发生错误的回调方法
//        websocket.onerror = function() {
//            setMessageInnerHTML("error");
//        };
//
//        //连接成功建立的回调方法
//        websocket.onopen = function(event) {
//            setMessageInnerHTML("Loc MSG: 成功建立连接");
//        }
//
//        //接收到消息的回调方法
//        websocket.onmessage = function(event) {
//            setMessageInnerHTML(event.data);
//        }
//
//        //连接关闭的回调方法
//        websocket.onclose = function() {
//            setMessageInnerHTML("Loc MSG:关闭连接");
//        }
//
//        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
//        window.onbeforeunload = function() {
//            websocket.close();
//        }
//    }




//    //将消息显示在网页上
//    function setMessageInnerHTML(innerHTML) {
//        document.getElementById('message').innerHTML += innerHTML + '<br/>';
//    }

//    //关闭连接
//    function closeWebSocket() {
//        websocket.close();
//    }
//
////    //发送消息
////    function send() {
////        var message = document.getElementById('text').value;
////        websocket.send( message);
////    }
//    //发送消息
//    function send() {
//        //获取输入的文本信息进行发送
//        var message = document.getElementById('text').value;
//        var toUser = document.getElementById('toUser').value;
//        var socketMsg = {msg:message,toUser:toUser};
//        if(toUser == ''){
//            //群聊.
//            socketMsg.type = 0;
//        }else{
//            //单聊.
//            socketMsg.type = 1;
//        }
//
//        websocket.send(JSON.stringify(socketMsg));
//    }
</script>
</html>